<template>
    <div class="main">
        <!--标题栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>添加打印机</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ name: 'printerList'}">位置列表</el-breadcrumb-item>
                    <el-breadcrumb-item>添加打印机</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
            <el-form ref="form" :model="form" label-width="150px">

                <el-form-item label="client_id">
                    <el-input v-model="form.client_id"></el-input>
                </el-form-item>

                <!--<el-form-item label="二维码">-->
                <!--<el-input v-model="form.qr_code"></el-input>-->
                <!--</el-form-item>-->

                <el-form-item label="client_secret">
                    <el-input v-model="form.client_secret"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>
<script>
  import url from '~/conf/settings'
  export default {
    data() {
      return {
        className:'right',
        form: {
          client_id: '',
          client_secret: '',
        },
        uploadAction: '',
        imageUrl: '',
      }
    },
    components: {
    },

    created() {
      this.uploadAction = url.uploadimg + '/uploadImage'
    },

    methods: {
      changeRight(value) {
        this.className = value
      },

      onSubmit(){
        let params = this.form

        this.$store.dispatch('createPrinter', params).then((ret) => {
          if(ret.success){
            this.$message({
              message: "成功",
              type: "success"
            });
            this.$router.push({ name: "machineList" });
          }else{
            this.$message({
              showClose: true,
              message: ret.errmsg,
              type: "error"
            });
          }
        })
      },

      handleAvatarSuccess(res, file) {
        this.form.img = res.url
        this.imageUrl = res.url
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG，或者png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
